<template>
  <el-container>
    <el-main class="lh300 cf ">
          <div class="fixed-center">
            <div :class="[position_list.length >= 5 ? 'frow fwarp astart' : 'frow fcenter']" >
              <div
                v-for="(item,index) in position_list"  :key="index"
                class="position sc"
                @click="change_position(item)">
                {{item.title}}
              </div>
            </div>
          </div>

          <div class="position-box fixed">


            <el-row :gutter="5">
              <el-col :span="3" :offset="6"><div class="grid-content bg-purple" style="text-align: center;line-height: 40px;font-size: 14px;">选择部门</div></el-col>
              <el-col :span="9">
                <div class="grid-content bg-purple">
                  <el-select  v-model="dept_id" filterable placeholder="请选择部门" @change="changeDept" style="width: 100%;">
                    <el-option
                      v-for="item in dept_list"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="5"></el-col>
            </el-row>


          </div>

    </el-main>
  </el-container>
</template>

<script>
//
import {getUserPosition,setUser} from '@/apilist/login'

    export default {
        name: "change_position",
      data(){
          return {
           position_list:[],
            dept_list:[],
            dept:'',
            position:'',
            uid:'',
            dept_id: '',
            dept_name: '',
          };
      },
      methods: {
          changeDept(dept_id){
             this.dept_list.forEach((item) => {
                 if(dept_id == item.id) this.dept_name = item.title
             })
          },
        change_position(item) {

          // console.log(item)
          // return;
          let _this = this;
          if (_this.fun.isNull(_this.dept_id)) {
            _this.$message.error('请选择部门');
            return;
          }

          let userinfo = sessionStorage.getItem('userinfo')

          userinfo = JSON.parse(userinfo)

          userinfo.dept_id = this.dept_id
          userinfo.dept_name = this.dept_name

          userinfo.position_id = item.id
          userinfo.position_name = item.title
          sessionStorage.setItem('userinfo', JSON.stringify(userinfo));

          setUser({'userinfo': userinfo}).then(res => {
            sessionStorage.setItem('access_token', res.access_token);
            _this.$router.push('/home');
          });

        },

          /*
   * 将一个数组分成几个同等长度的数组
   * array[分割的原数组]
   * size[每个子数组的长度]
   *
   */
   sliceArray(array, size) {
      var result = [];
      for (var x = 0; x < Math.ceil(array.length / size); x++) {
          var start = x * size;
          var end = start + size;
          result.push(array.slice(start, end));
      }
      return result;
  }


},

      mounted() {
          let userinfo = sessionStorage.getItem('userinfo');
           userinfo = JSON.parse(userinfo)
           this.uid = userinfo.uid
           let query = {id:this.uid}
           getUserPosition(query).then(res => {
             //this.position_list = this.sliceArray(res.data.position_list,3)
             this.position_list = res.data.position_list;
               //console.log(this.position_list)
               //return
             this.dept_list = res.data.dept_list;
             this.dept_id = this.dept_list[0]['id']
             this.dept_name = this.dept_list[0]['title']
           })

      }
    }
</script>

<style scoped >
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #d3dce6;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .lh300{
    line-height: 30px;
    height:510px;

  }

  .position-box{
    width:750px;
    margin: 10px auto;
  }
  .position{
    width:130px;
    height:30px;
    /*border:1px solid #222;*/
    background: url("../../../static/img/zw.png") no-repeat;
    background-size: 100%;
    text-align: center;
    color:#222;
    margin: 10px;
    font-size: 14px;
  }

  .grid-3{
    display: grid;
    grid-template-rows: repeat(3, minmax(18px, auto));
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-around;
    grid-gap:10px 20px;
  }

  .fixed{
    position: absolute;
    bottom: 0;
    left:50%;
    transform: translate(-50%,0);
  }

  .fixed-center{
    position: fixed;
    top:30%;
    left:50%;
    transform: translate(-50%,-50%);
    width:750px;
    height:200px;
  }

</style>
